<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!-- All Spring messages used in this view are declared below with a variable -->
<spring:message code="register_lbl" var="register_lbl"/>
<spring:message code="customer.genderMale_lbl" var="gendermale_lbl"/>
<spring:message code="customer.genderFemale_lbl" var="genderfemale_lbl"/>
<spring:message code="customer.firstname_lbl" var="firstname_lbl"/>
<spring:message code="customer.lastname_lbl" var="lastname_lbl"/>
<spring:message code="customer.birthdate_lbl" var="birthdate_lbl"/>
<spring:message code="customer.address_lbl" var="address_lbl"/>
<spring:message code="customer.streetname_lbl" var="streetname_lbl"/> 
<spring:message code="customer.housenumber_lbl" var="housenumber_lbl"/> 
<spring:message code="customer.postalcode_lbl" var="postalcode_lbl"/>
<spring:message code="customer.postalcodeExample_lbl" var="postalcode_example_lbl"/>
<spring:message code="customer.abode_lbl" var="city_lbl"/>
<spring:message code="customer.country_lbl" var="country_lbl"/>
<spring:message code="customer.emailaddress_lbl" var="emailaddress_lbl"/>
<spring:message code="customer.phonenumber_lbl" var="phonenumber_lbl"/>
<spring:message code="customer.username_lbl" var="username_lbl"/>
<spring:message code="customer.password_lbl" var="password_lbl"/>
<spring:message code="customer.confirmPassword_lbl" var="confirmPassword_lbl"/>
<spring:message code="register_btn" var="register_btn"/>

<!-- Body -->
<div class="panel panel-default" >
    <div class="panel-heading" >
        ${register_lbl}
    </div>
    <div class="container-fluid">
        <form:form class="form-horizontal" id="loginForm" action="${pageContext.request.contextPath}/customer/create" method="post" modelAttribute="customer">
            <div class="row">
                <div class="form-group">
                    <div class="col-md-3"></div>
                    <div class="col-xs-2">
                        <form:radiobutton path="gender" class="radio" value="0"/> ${gendermale_lbl}                    
                    </div>
                    <div class="col-xs-1">
                        <form:radiobutton path="gender" class="radio" value="1"/> ${genderfemale_lbl}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${firstname_lbl}</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='firstName' placeholder="${firstname_lbl}"/>                          
                        <form:errors path="firstName" cssClass="error" />
                    </div>
                </div>                   
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${lastname_lbl}</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='lastName' placeholder="${lastname_lbl}"/>
                        <form:errors path="lastName" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${birthdate_lbl}</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='date' path='birthdate' />
                        <form:errors path="birthdate" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${address_lbl}</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='streetAdress' placeholder="${streetname_lbl}"/>
                        <form:errors path="streetAdress" cssClass="error" />                      
                    </div>
                    <div class="col-md-2">
                        <form:input class="form-control" type='text' path='houseNumber' placeholder="${housenumber_lbl}"/>
                        <form:errors path="houseNumber" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label"></label>
                    <div class="col-md-2">
                        <form:input class="form-control" type='text' path='postalCode' placeholder="${postalcode_example_lbl}"/>
                        <form:errors path="postalCode" cssClass="error" />
                    </div>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='city' placeholder="${city_lbl}" />
                        <form:errors path="city" cssClass="error" />
                    </div>
                </div>
            </div>
                    <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label"></label>
                    <div class="col-md-2">
                        <form:input class="form-control" type='text' path='country' placeholder="${country_lbl}"/>
                        <form:errors path="country" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${phonenumber_lbl}</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='telephone1' placeholder="${phonenumber_lbl}"/>
                        <form:errors path="telephone1" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${emailaddress_lbl}</label>
                    <div class="col-md-3">
                        <form:input class="form-control" type='text' path='email' placeholder="${emailaddress_lbl}"/>                            
                        <form:errors path="email" cssClass="error" />
                    </div>
                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${username_lbl}</label>
                    <div class="col-md-4">
                        <form:input class="form-control" type='text' path='gebruiker.username' placeholder="${username_lbl}"/>
                        <form:errors path="gebruiker.username" cssClass="error" />
                    </div>
                </div>
            </div>           
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${password_lbl}</label>
                    <div class="col-md-4">
                        <form:password class="form-control" path='gebruiker.password' placeholder="${password_lbl}"/>
                        <form:errors path="gebruiker.password" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">${confirmPassword_lbl}</label>
                    <div class="col-md-4">
                        <form:password class="form-control" path='gebruiker.passwordConfirm' placeholder="${confirmPassword_lbl}"/>
                        <form:errors path="gebruiker.passwordConfirm" cssClass="error" />
                        <form:errors path="gebruiker" cssClass="error" />
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
            <input class="btn" id="submit" name="submit" type="submit" value="${register_btn}"/>
        </form:form>
    </div>
</div>